<template>
  <div class="content">
    <common-head @parking-selected="handleParkingSelected"></common-head>
    <common-search @search="handleSearch"></common-search>
    <div class="status-container">
      <div
        v-for="(tab, index) in statusTabs"
        :key="index"
        :class="['status-box', { active: activeTab === index }]"
        @click="handleTabClick(index)"
      >
        <div class="count">{{ tab.count }}</div>
        <div class="label">{{ tab.label }}</div>
      </div>
    </div>
    <van-loading v-if="loading" class="loading-tip" size="24px">
      数据加载中...
    </van-loading>
    <!-- 调整停车点信息结构 -->
    <div v-else class="parking-spot-info">
      <!-- 遍历所有停车场 -->
      <div v-if="isEmpty(parkingSpots)" class="no-data-tip">
        暂无数据...
      </div>
      <div
        v-else
        v-for="(parkingSpot, parkingId) in parkingSpots"
        :key="parkingId"
        class="parking-group"
      >
        <div class="spot-header">
          <div class="title-area">
            <h3>{{ parkingSpot.name }}</h3>
            <div class="occupancy">
              当前占用泊位：{{ parkingSpot.occupiedSpots }}
            </div>
          </div>
          <div class="total-box">
            <div>总泊位</div>
            <div class="number">{{ parkingSpot.totalSpots }}</div>
          </div>
        </div>
        <div class="vehicle-list">
          <!-- 车辆信息 -->
          <div
            v-for="(vehicle, index) in parkingSpot.vehicles"
            :key="index"
            class="vehicle-info"
          >
            <div class="berth-number">
              泊位号：{{ vehicle.berthNumber || "--" }}
            </div>
            <div class="divider-line"></div>
            <div class="vehicle-info-title">
              车辆信息
              <van-tag type="warning" size="mini">{{
                vehicle.orderStatus_dictText
              }}</van-tag>
            </div>
            <div>车牌号码：{{ vehicle.licensePlate || "--" }}</div>
            <div>车辆类型：{{ vehicle.vehicleType }}</div>
            <div>进场时间：{{ vehicle.entryTime || "--" }}</div>
            <div v-if="vehicle.exitTime">离场时间：{{ vehicle.exitTime }}</div>
            <div>当前费用：¥{{ vehicle.fee }}</div>
            <div>停车时间：{{ vehicle.parkingDuration || "--" }}</div>
            <div class="button-group">
              <div class="action-row">
                <van-button
                  class="deep-blue-btn"
                  size="small"
                  @click="feeRecovery(parkingId)"
                >
                  费用追缴
                </van-button>
                <van-button
                  disabled
                  class="deep-blue-btn"
                  size="small"
                  @click="modifyPlate(parkingId, index)"
                >
                  修改车牌
                </van-button>
                <van-button
                  class="deep-blue-btn"
                  size="small"
                  @click="doubleCharge(parkingId, index)"
                  :loading="chargingIndex === index"
                >
                  双倍收费
                </van-button>
              </div>
              <div class="action-row-bottom">
                <van-button
                  class="end-order"
                  type="danger"
                  size="small"
                  @click="showManualSettlement(parkingId, index)"
                >
                  结束订单
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-pagination
      v-model="pageNo"
      :page-count="Math.ceil(total / pageSize)"
      :items-per-page="pageSize"
      mode="simple"
      @change="handlePageChange"
      v-if="!loading && total > 0"
      class="pagination"
    />
    <van-dialog
      v-model="showModifyPlateDialog"
      title="修改车牌"
      show-cancel-button
      @confirm="confirmModifyPlate"
    >
      <div style="padding: 20px;">
        <div class="plate-input-group">
          <!-- 省份选择 -->
          <van-field
            readonly
            clickable
            :value="selectedProvince"
            placeholder="选择省份"
            @click="showProvincePicker = true"
            style="width: 80px;"
          />
          <!-- 剩余车牌号输入 -->
          <van-field
            v-model="carNumberSuffix"
            placeholder="请输入剩余车牌号"
            maxlength="7"
            style="flex: 1;"
          />
        </div>

        <!-- 省份选择器 -->
        <!-- 省份选择器部分代码 -->
        <van-popup v-model="showProvincePicker" position="bottom">
          <div class="province-grid">
            <div
              v-for="(province, idx) in provinceList"
              :key="idx"
              :class="[
                'province-item',
                { active: selectedProvince === province }
              ]"
              @click="
                selectedProvince = province;
                showProvincePicker = false;
              "
            >
              {{ province }}
            </div>
          </div>
        </van-popup>
      </div>
    </van-dialog>
    <van-dialog
      v-model="showSettlementDialog"
      title="手动结算"
      show-cancel-button
      @confirm="confirmManualSettlement"
    >
      <div style="padding: 20px;">
        <van-field
          v-model="settlementData.discountAmount"
          type="number"
          label="优惠金额"
          placeholder="请输入优惠金额（整数）"
        />
        <van-field
          v-model="settlementData.handleDesc"
          label="说明"
          placeholder="请输入结算说明"
        />
      </div>
    </van-dialog>
  </div>
</template>

<script>
import commonHead from "../../components/xc/commonHead.vue";
import commonSearch from "../../components/xc/commonSearch.vue";

export default {
  components: {
    commonHead,
    commonSearch
  },
  data() {
    return {
      showProvincePicker: false,
      selectedProvince: "",
      carNumberSuffix: "",
      provinceList: [
        "京",
        "沪",
        "津",
        "渝",
        "冀",
        "晋",
        "辽",
        "吉",
        "黑",
        "苏",
        "浙",
        "皖",
        "闽",
        "赣",
        "鲁",
        "豫",
        "鄂",
        "湘",
        "粤",
        "琼",
        "川",
        "贵",
        "云",
        "陕",
        "甘",
        "青",
        "蒙",
        "桂",
        "宁",
        "新",
        "藏",
        "使",
        "领",
        "警",
        "学",
        "港",
        "澳"
      ],
      //分页
      pageNo: 1,
      pageSize: 10,
      total: 0,
      parkingLotCache: {}, // 停车场信息缓存

      showSettlementDialog: false,
      selectedParkingId: null, // 新增选中停车场ID
      settlementData: {
        parkingId: null,
        vehicleIndex: null,
        discountAmount: 0,
        handleDesc: ""
      },
      // 新增修改车牌状态变量
      showModifyPlateDialog: false,
      newCarNumber: "",
      currentParkingId: null,
      currentVehicleIndex: null,
      chargingIndex: -1, // 当前操作索引
      statusTabs: [
        { label: "在停", count: "" },
        { label: "未缴费", count: "" },
        { label: "已支付", count: "" },
        { label: "无费用", count: "" }
      ],
      loading: true,
      parkingSpots: {}, // 存储分组后的停车场数据

      show: false,
      searchValue: "",
      activeTab: 0,
      currentParkingSpot: {
        name: "加载中...",
        totalSpots: 0,
        occupiedSpots: 0,
        vehicles: [] // 清空静态数据
      },
      parkingCount: 12
    };
  },
  async mounted() {
    await this.$nextTick();
    if (
      this.$refs.commonHead &&
      this.$refs.commonHead.actions &&
      this.$refs.commonHead.actions.length
    ) {
      this.selectedParkingId = this.$refs.commonHead.actions[0].value;
    }
    this.getOrderList();
  },
  methods: {
    isEmpty(obj) {
      return Object.keys(obj).length === 0;
    },
    //搜索
    handleSearch(value) {
      this.searchValue = value;
      this.pageNo = 1; // 重置页码
      this.getOrderList(); // 重新获取数据
    },
    // 处理停车场选择
    handleParkingSelected(parkingId) {
      this.selectedParkingId = parkingId;
      this.pageNo = 1; // 切换停车场时重置页码
      this.getOrderList();
    },
    showManualSettlement(parkingId, vehicleIndex) {
      const vehicle = this.parkingSpots[parkingId].vehicles[vehicleIndex];
      this.settlementData = {
        parkingId,
        vehicleIndex,
        discountAmount: 0,
        handleDesc: ""
      };
      // if
      this.showSettlementDialog = true;
    },

    // 确认手动结算
    async confirmManualSettlement() {
      try {
        await this.getOrderList();
        const {
          parkingId,
          vehicleIndex,
          discountAmount,
          handleDesc
        } = this.settlementData;
        const vehicle = this.parkingSpots[parkingId].vehicles[vehicleIndex];
        if (vehicle.tradeNo) {
          // 生成结束时间（ISO格式转指定格式）
          const formatTime = date => {
            const pad = n => n.toString().padStart(2, "0");
            return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
              date.getDate()
            )} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
              date.getSeconds()
            )}`;
          };
          // 计算实际缴费金额（总费用 - 优惠金额）
          const settlementFee = Math.max(
            0,
            (vehicle.fee_orig || 0) - (parseInt(discountAmount) || 0)
          );
          const params = {
            discountAmount: parseInt(discountAmount) || 0,
            handleDesc: handleDesc,
            endTime: formatTime(new Date()),
            totalFee: vehicle.fee_orig,
            parkingDuration: vehicle.parkingDuration_ori, // 添加停车时长
            settlementFee: settlementFee, // 添加实际缴费
            tradeNo: vehicle.tradeNo
            // tradeNo: "01202411290000003"
          };

          const { code, message } = await this.baseService.post(
            `/parking/bizParkingOrder/manualSettlement`,
            params
          );
          if (code === 200) {
            this.$toast.success("结算成功");
            await this.getOrderList();
          } else {
            this.$toast.fail(message || "结算失败");
          }
        } else {
          const { code, message } = await this.baseService.get(
            `/parking/bizParkingOrder/endOrder?id=${vehicle.orderId}`
          );

          if (code === 200) {
            this.$toast.success(" 订单已结束");
            await this.getOrderList();
          } else {
            this.$toast.fail(message || "结束订单失败");
          }
        }
      } catch (error) {
        console.error("手动结算异常:", error);
        this.$toast.fail("请求失败");
      } finally {
        this.showSettlementDialog = false;
        this.settlementData = {
          parkingId: null,
          vehicleIndex: null,
          discountAmount: 0,
          handleDesc: ""
        };
      }
    },
    getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // 获取订单列表
    async getOrderList() {
      try {
        this.loading = true;
        let BaseQueryUrl = "/parking/bizParkingOrder/queryList";
        let queryParams = [];
        queryParams.push("parkingLotsType=20");
        queryParams.push(`startTimeStart=${this.getCurrentDate()} 00:00:00`);
        queryParams.push(`startTimeEnd=${this.getCurrentDate()} 23:59:59`);

        // 基础分页参数
        queryParams.push(`pageNo=${this.pageNo}`);
        queryParams.push(`pageSize=${this.pageSize}`);

        // 停车场筛选
        if (this.selectedParkingId) {
          queryParams.push(`parkingId=${this.selectedParkingId}`);
        }

        // 搜索条件
        if (this.searchValue) {
          queryParams.push(
            `carNumber=${encodeURIComponent(this.searchValue.trim())}`
          );
        }

        // 状态标签映射（根据activeTab映射状态集合）
        const statusMap = {
          0: [10, 11], // 在停（全部状态）
          1: [20], // 未缴费：已出场未结算(20)
          2: [30, 11], // 已支付：已出场结算(30)、已退款(50)
          3: [10] // 退款相关：退款中(40)、退款失败(41)、退款审核中(42)、已退款(50)
        };

        // 添加状态过滤参数
        if (this.activeTab !== 0 && statusMap[this.activeTab]) {
          queryParams.push(
            `orderStatusList=${statusMap[this.activeTab].join(",")}`
          );
        } else {
          queryParams.push(`orderStatusList=10,11`);
        }

        // 拼接完整请求URL
        if (queryParams.length > 0) {
          BaseQueryUrl += `?${queryParams.join("&")}`;
        }
        // 获取统计数据
        let statsUrl =
          "/parking/bizParkingOrder/getStatusStatistics?parkingLotsType=20&";
        if (this.selectedParkingId) {
          statsUrl += `?parkingId=${this.selectedParkingId}`;
        }
        const [statsRes, listRes] = await Promise.all([
          this.baseService.get(statsUrl),
          this.baseService.get(BaseQueryUrl)
        ]);
        console.log("statsRes:::111 ", statsRes);

        // 更新状态统计（根据新状态定义调整）
        this.statusTabs = [
          { label: "在停", count: statsRes.result.parkingCount },
          { label: "未缴费", count: statsRes.result.unpaidCount },
          { label: "已支付", count: statsRes.result.paidCount },
          { label: "零费用", count: statsRes.result.nofeesCount || 0 }
        ];

        // 更新分页总数
        this.total = listRes.result.total || 0;

        // 分组处理逻辑
        const grouped = listRes.result.records.reduce((acc, item) => {
          if (
            this.selectedParkingId &&
            item.parkingId !== this.selectedParkingId
          )
            return acc;

          const parkingId = item.parkingId;
          if (!acc[parkingId]) {
            acc[parkingId] = {
              name: item.parkingName || "未知停车场",
              totalSpots: 0,
              occupiedSpots: 0,
              vehicles: []
            };
          }

          // 完善车辆状态显示
          const statusTextMap = {
            10: "待出场",
            11: "未出场已结算",
            12: "扣款失败",
            20: "未缴费",
            30: "已支付",
            40: "退款中",
            41: "退款失败",
            42: "审核中",
            50: "已退款",
            60: "已作废",
            70: "已合并"
          };

          acc[parkingId].vehicles.push({
            orderId: item.id,
            berthNumber: item.carportCode,
            licensePlate: item.carNumber,
            vehicleType: this.parseVehicleType(item.carNumberStr),
            entryTime: this.formatTime(item.startTime),
            exitTime: item.endTime ? this.formatTime(item.endTime) : null,
            fee: item.totalFee_fmt || "0.00",
            fee_orig: item.totalFee,
            parkingDuration: item.parkingDurationStr,
            parkingDuration_ori: item.parkingDuration,
            orderStatus_dictText: statusTextMap[item.orderStatus] || "未知状态",
            tradeNo: item.tradeNo,
            plateType: item.plateType,
            orderStatus: item.orderStatus // 新增原始状态值
          });

          acc[parkingId].occupiedSpots++;
          return acc;
        }, {});

        // 获取停车场总泊位数（添加缓存优化）
        for (const parkingId in grouped) {
          if (!this.parkingLotCache) this.parkingLotCache = {};
          if (!this.parkingLotCache[parkingId]) {
            const lotRes = await this.baseService.get(
              `/parking/bizParkingLots/queryById?id=${parkingId}`
            );
            this.parkingLotCache[parkingId] =
              lotRes.result.parkingSpaceCount || 0;
          }
          grouped[parkingId].totalSpots = this.parkingLotCache[parkingId];
        }

        this.parkingSpots = grouped;
      } catch (error) {
        console.error("获取订单列表失败:", error);
        this.$toast.fail("数据加载失败");
      } finally {
        this.loading = false;
      }
    },

    parseVehicleType(str) {
      // return str?.split(' ')[0] || '未知类型';
      return (str ? str.split("  ")[0] : null) || "未知类型";
    },

    // 辅助方法：格式化时间
    formatTime(timeStr) {
      return (timeStr ? timeStr.replace(" ", "-") : null) || "--";
      // return timeStr.replace(' ', '-') || '--';
    },

    showSheet() {
      this.show = true;
    },
    onCancel() {
      this.show = false;
    },
    getSheetValue(value, index) {
      console.log(value, index);
      // 根据选择的停车点更新currentParkingSpot等数据
    },

    feeRecovery(id) {
      this.baseService
        .get("/parking/bizParkingOrder/orderCollection?id=" + id)
        .then(res => {
          this.$toast(res.message);
        });
    },
    printReceipt(index) {
      console.log("打印小票，车辆索引：", index);
    },
    modifyPlate(parkingId, vehicleIndex) {
      this.showModifyPlateDialog = true;
      this.currentParkingId = parkingId;
      this.currentVehicleIndex = vehicleIndex;

      // 拆分原有车牌
      const fullPlate = this.parkingSpots[parkingId].vehicles[vehicleIndex]
        .licensePlate;
      this.selectedProvince = fullPlate ? fullPlate.charAt(0) : "";
      this.carNumberSuffix = fullPlate ? fullPlate.slice(1) : "";
    },
    onProvinceConfirm(value) {
      this.selectedProvince = value;
      this.showProvincePicker = false;
    },

    async confirmModifyPlate() {
      // 校验输入
      if (!this.selectedProvince) {
        this.$toast("请选择省份简称");
        return;
      }
      if (!this.carNumberSuffix) {
        this.$toast("请输入车牌号码");
        return;
      }

      // 合并车牌号
      const newPlate = this.selectedProvince + this.carNumberSuffix;
      try {
        const parkingId = this.currentParkingId;
        const vehicleIndex = this.currentVehicleIndex;
        const vehicle = this.parkingSpots[parkingId].vehicles[vehicleIndex];

        const params = {
          carNumber: newPlate,
          orderId: vehicle.orderId,
          plateType: vehicle.plateType
        };

        const { code, message } = await this.baseService.post(
          "/parking/bizParkingOrder/changeCarNumber",
          params
        );

        if (code === 200) {
          this.$toast.success("修改成功");
          await this.getOrderList();
        } else {
          this.$toast.fail(message || "修改失败");
        }
      } catch (error) {
        console.error("修改车牌异常:", error);
        this.$toast.fail("请求失败");
      } finally {
        this.resetModifyDialog();
      }
    },
    resetModifyDialog() {
      this.showModifyPlateDialog = false;
      this.newCarNumber = "";
      this.currentParkingId = null;
      this.currentVehicleIndex = null;
    },
    // 双倍收费
    doubleCharge(parkingId, vehicleIndex) {
      this.$dialog
        .confirm({
          title: "双倍收费确认",
          message: "确定要执行双倍收费吗？",
          confirmButtonColor: "#ee0a24"
        })
        .then(async () => {
          try {
            const parkingSpot = this.parkingSpots[parkingId];
            const vehicle = parkingSpot.vehicles[vehicleIndex];
            if (!vehicle.orderId) {
              this.$toast.fail(" 缺失订单ID");
              return;
            }
            // 构造请求参数
            console.log(" 执行 双倍收费", vehicle);
            const params = {
              id: vehicle.orderId // 需确认数据结构中是否存在该字段
              // amount: Math.floor(parseFloat(vehicle.fee) * 2) // 双倍金额计算
            };
            const { code, message } = await this.baseService.get(
              "/parking/bizParkingOrder/doubleFee?id=" + vehicle.orderId
            );

            if (code === 200) {
              this.$toast.success(" 双倍收费成功");
              await this.getOrderList(); // 刷新数据
            } else {
              this.$toast.fail(message || "操作失败");
            }
          } catch (error) {
            console.error(" 双倍收费异常:", error);
            this.$toast.fail(" 网络请求异常");
          } finally {
            this.chargingIndex = -1;
          }
        });
    },
    handlePageChange(newPage) {
      this.pageNo = newPage;
      this.getOrderList();
    },

    handleTabClick(index) {
      this.activeTab = index;
      this.pageNo = 1; // 切换标签时重置页码
      if (index === 1) {
        // 未缴费标签的索引为1
        this.$router.push({ name: "UnPayPage" });
      } else if (index === 2) {
        // 未缴费标签的索引为1
        this.$router.push({ name: "PayPage" });
      } else if (index === 3) {
        // 未缴费标签的索引为1
        this.$router.push({ name: "NoCostPage" });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  // background: #b4d9fd;
  overflow-y: auto;
  // height: 91vh !important;
  .parking-spot-info {
    margin-bottom: 68px;
  }
}

.status-box {
  position: relative;

  .van-tag {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
  }
}

.head {
  color: black;
  background-color: #cee7ff;
  background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .head-left {
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
      color: white;
      font-weight: 700;
    }
  }

  img {
    width: 40px;
    height: 40px;
  }
}

.search-bar {
  display: flex;

  .search-trigger {
    background: white;
    color: #0083fd;
    font-size: 15px;
    padding: 6px 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;

    &:active {
      background: rgba(24, 144, 255, 0.1);
      transform: scale(0.98);
    }
  }
}

.parking-spot-info {
  margin: 10px;
  padding: 10px;
  background: white;

  .spot-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .vehicle-info {
    background: #d9e8fc;
    padding: 15px;
    margin-bottom: 10px;
    color: #666;
    border-radius: 8px;

    .berth-number {
      font-size: 18px;
      font-weight: 700;
      color: #101010;
      margin-bottom: 10px;
    }

    .divider-line {
      height: 2px;
      background: #bababa !important; // 提高颜色对比度
      margin: 12px 0; // 增加上下边距确保可见性
      width: 100%; // 避免宽度不足
    }

    .vehicle-info-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin: 10px 0 8px;
      padding-left: 4px;
    }
  }
}

.status-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .status-box {
    aspect-ratio: 1;
    background: #f5f7fa;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &.active {
      background: #1890ff;

      .count,
      .label {
        color: white;
      }

      transform: scale(0.95);
    }

    .count {
      font-size: 25px;
      font-weight: bold;
      color: #188ffd;
    }

    .label {
      font-size: 15px;
      color: #188ffd;
    }
  }
}

.spot-header {
  position: relative;
  padding: 12px;

  .title-area {
    h3 {
      margin: 0;
      font-weight: bold;
      font-size: 20px;
      color: #101010;
    }

    .occupancy {
      font-size: 12px;
      color: #909399;
      margin-top: 4px;
    }
  }

  .total-box {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #f5f7fa;
    padding: 6px 10px;
    border-radius: 4px;
    text-align: center;

    div:first-child {
      font-size: 12px;
      color: #909399;
    }

    .number {
      font-weight: bold;
      color: #303133;
    }
  }
}

.button-group {
  margin-top: 12px;

  .action-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;

    .deep-blue-btn {
      flex: 1;
      min-width: 30%;
      height: 32px;
      background: #096dd9 !important;
      border-color: #096dd9 !important;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: white !important;
        font-size: 13px;
      }

      &:active {
        background: #0050b3 !important;
        transform: scale(0.98);
      }
    }
  }

  .action-row-bottom {
    .end-order {
      background-color: #096dd9 !important;
      border-color: #096dd9 !important;
      width: 100%;
      border-radius: 4px;

      span {
        color: white !important;
        font-size: 13px;
      }
    }
  }
}

.loading-tip {
  display: flex;
  justify-content: center;
  padding: 20px;
  color: #666;
}

.vehicle-info-title {
  display: flex;
  align-items: center;
  gap: 8px;

  .van-tag {
    transform: translateY(-1px);
  }
}

.loading-tip {
  display: flex;
  justify-content: center;
  padding: 20px;
  color: #666;
}

.vehicle-info-title {
  display: flex;
  align-items: center;
  gap: 8px;

  .van-tag {
    transform: translateY(-1px);
  }
}

//.parking-group {
//  background: white;
//  margin: 10px;
//  border-radius: 8px;
//  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
//  overflow: hidden;
//
//  &:not(:last-child) {
//    margin-bottom: 20px; // 增加停车场区块间距
//  }
//
//  .vehicle-list {
//    padding: 0 12px 12px; // 车辆列表内边距
//  }
//}

.spot-header {
  background: #f5f7fa;
  padding: 12px;
  border-bottom: 1px solid #e4e7ed; // 添加分割线
}

.pagination {
  margin: 15px 0;
  justify-content: center;

  /deep/ .van-pagination__item {
    background: #fff;

    &--active {
      background: #1890ff;
      color: white;
    }
  }
}

.plate-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.van-field__control {
  text-align: center;
}

//.van-pagination {
//  padding: 15px;
//  background: white;
//  margin: 10px;
//  border-radius: 8px;
//  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
//}
.province-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  margin: 12px 0;
}

.province-item {
  padding: 10px;
  border: 1px solid #ebedf0;
  border-radius: 4px;
  text-align: center;
  transition: all 0.2s;

  &.active {
    background: #eaf8ff;
    border-color: #1989fa;
    color: #1989fa;
  }

  &:hover {
    background-color: #f5f5f5;
  }
}
.no-data-tip {
  width: 100%;
  display: flex;
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  font-size: 16px;
  color: #606266;
}
</style>
